<template>
  <!-- PM1 -->
  <div>
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="115px"
        >
          <el-form-item label="开始时间:">
            <el-date-picker
              v-model="listQuery.startTime"
              type="date"
              size="medium"
              placeholder="选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-date-picker
              v-model="listQuery.endTime"
              type="date"
              size="medium"
              placeholder="选择结束时间"
              :picker-options="pickerOptionsEnd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="实时值:" prop="realValue">
            <el-input
              v-model="listQuery.realValue"
              placeholder="请输入"
              clearable
              size="medium"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="巡检点名称:" prop="pointName">
            <el-input
              v-model="listQuery.pointName"
              placeholder="请输入"
              clearable
              size="medium"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="是否告警:">
            <el-checkbox-group v-model="listQuery.isAlarm">
              <el-checkbox label="1" name="type">是</el-checkbox>
              <el-checkbox label="2" name="type">否</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="search-area-btn btns">
        <div @click="serachBtn" class="serch-btn cuver-point">搜索</div>
        <div @click="resetFormBtn('listQuery')" class="reset-btn cuver-point">
          重置
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="self">
        <!-- <div class="search-area-btn btns">
          <div class="serch-btn cuver-point table-top" @click="exportReport">
            导出Excel
          </div>
        </div> -->
        <el-table
          ref="tableRef"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 16px"
          @selection-change="selectionChange"
        >
          <!-- <el-table-column align="center" type="selection"></el-table-column> -->
          <el-table-column align="center" prop="realValue" label="采集时间">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="实时值">
          </el-table-column>
          <el-table-column align="center" prop="realValue" label="位置">
          </el-table-column>
          <el-table-column align="center" prop="realValue" label="巡检点">
          </el-table-column>
          <el-table-column align="center" prop="realValue" label="是否告警">
          </el-table-column>
        </el-table>
      </div>
      <div class="pagenation">
        <pagination
          :total="total"
          :page.sync="listQuerySubmit.pageNum"
          :limit.sync="listQuerySubmit.pageSize"
          @pagination="getTableList"
        >
        </pagination>
      </div>
      <!-- Echarts -->
      <div>
        <div
          class="line-chart"
          id="chartId"
          :style="{ width: '98%', height: '400px' }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 结束日期
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.listQuery.startTime;
          if (beginDateVal) {
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            );
          }
        },
      },
      listQuery: {
        startTime: null,
        endTime: null,
        realValue: null,
        pointName: null,
        isAlarm: [],
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      listQuerySubmit: {},
      tableData: [],
      ids: [], // 选中数组
      single: true, // 非单个禁用
    };
  },
  created() {
    this.listQuerySubmit = Object.assign({}, this.listQuery);
    this.getTableList();
    this.$nextTick(() => {
      this.drawLineChart();
    });
  },
  mounted() {
    this.getTableList();
    this.drawLineChart();
  },
  methods: {
    /**搜索 */
    serachBtn() {
      this.listQuery.pageNum = 1;
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getTableList(); //表格数据
      this.drawLineChart(); //图表
    },
    /** table多选 */
    selectionChange(selection) {
      this.ids = selection.map((item) => item.resourceId);
      this.single = selection.length !== 1;
    },
    /**导出Excel */
    exportReport() {
      if (this.ids.length == 0) {
        this.$message.info("请先选择数据再导出！");
        return;
      } else {
        // this.download(
        //   "data.resource/resource.export",
        //   {
        //     ...this.queryParams,
        //   },
        //   `氧气报告${new Date().getTime()}.xlsx`
        // );
      }
    },
    /**获取表格 图标数据 */
    getTableList() {
      //是否告警
      let isAlarm = this.listQuerySubmit.isAlarm;
      if (isAlarm && isAlarm.length > 0) {
        if (isAlarm.indexOf(",") == -1) {
          isAlarm = String(isAlarm);
        } else {
          isAlarm = isAlarm.join(",");
        }
      }
      let params = {
        ...this.listQuerySubmit,
        isAlarm: isAlarm,
      };
      // API_getalarmInfo(obj)
      //   .then((res) => {
      //     if (res.code == 200) {
      //       //表格数据
      //       this.tableData = res.rows;
      //       this.total = Number(res.total);
      //       this.listQuery = Object.assign({}, this.listQuerySubmit);
      //     }
      //   })
      //   .then(() => {
      //     //绘制24h折线图
      //   });
    },
    /**折线图 */
    drawLineChart() {
      // 获取Dom
      var chartDom = document.getElementById("chartId");
      var lineChart = echarts.init(chartDom);
      if (!chartDom) {
        return;
      }
      // 绘制配置
      var options;
      options = {
        title: {
          textStyle: {
            fontWeight: "normal",
          },
          left: "50%",
          top: "10",
        },
        //线的颜色
        tooltip: {
          trigger: "axis",
        },
        color: ["#00D1FF"],
        // 折线图内边距
        grid: {
          left: "3%",
          right: "3%",
          bottom: "18%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "rgba(191, 202, 212, 1)",
            fontSize: 11,
          },
          data: [
            "2",
            "4",
            "6",
            "8",
            "10",
            "12",
            "14",
            "16",
            "18",
            "20",
            "22",
            "24",
          ],
        },
        yAxis: {
          axisLabel: {
            color: "rgba(191, 202, 212, 1)",
            fontSize: 11,
          },
          type: "value",
          nameTextStyle: {
            color: " #BFCAD4",
            nameLocation: "start",
            fontSize: "14",
          },
          min: 0, //取0为最小刻度
          scale: true, //自适应
          nameGap: 15,
          axisTick: {
            show: false, //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          splitLine: {
            // ⽹格线
            show: true,
            lineStyle: {
              color: "#2e3f48",
              type: "dotted",
              width: "2",
            },
          },
        },
        series: {
          data: [
            150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147,
            260, 150, 230, 224, 218, 135, 147, 260, 70, 280,
          ],
          type: "line",
        },
      };
      options && lineChart.setOption(options);
    },
    /** 重置按钮操作 */
    resetFormBtn() {
      this.listQuery = {
        startTime: null,
        endTime: null,
        realValue: null,
        pointName: null,
        isAlarm: [],
      };
      this.serachBtn();
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 738px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
  .btns {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    div:nth-child(2) {
      margin: 0 16px;
    }
  }
  .table-btns {
    display: flex;
    div {
      display: flex;
      width: 46px;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2) {
      margin: 0 10px;
    }
  }
}
// 小手样式
.cuver-point {
  cursor: pointer;
}
::v-deep {
  .el-tabs__item {
    color: rgba(255, 255, 255, 0.5);
  }
  .el-tabs__nav-wrap::after {
    background-color: rgba(241, 243, 249, 0.2) !important;
  }
  .el-tabs__nav-scroll {
    padding: 0 35px;
  }
  .el-tabs__item.is-active {
    color: rgba(0, 209, 255, 1);
  }
  .el-tabs__active-bar {
    width: 50px !important;
    left: -5px;
    background-color: rgba(0, 209, 255, 1);
  }
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 30vh !important;
  }
}
</style>
